<template lang="">
    <dl>
        <dt>
            <!-- <img v-lazy="item.cover" alt="" /> -->
            <img :src="item.cover" alt="" />
        </dt>
        <dd>
            <h3>{{ item.name }}</h3>
            <p>{{ item.volume }}</p>
            <div>
                <span>价格:{{ item.price }}</span>
                <span>购物车</span>
            </div>
        </dd>
    </dl>
</template>
<script>
export default {
    props: {
        item: {
            type: Object,
            default: () => {},
        },
    },
    
};
</script>
<style lang="scss">
dl {
    height: 120px;
    width: 100%;
    display: flex;
    padding: 0 10px;
    box-sizing: border-box;
    dt {
        height: 120px;
        width: 120px;
        img {
            height: 100%;
            width: 100%;
        }
    }
    dd {
        flex: 1;
        > div {
            > span:nth-child(1) {
                color: var(--primary-color);
            }
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>
